<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../mixins/style/base.css" />
    <link rel="stylesheet" href="../mixins/style/normalize.css" />

    <style>
        .nav-a {
            padding: 10px 15px;
            background-color: lightseagreen;
            color: white;
            line-height: 26px;
            height: 26px;
            cursor: pointer;
            margin-right: 10px;
            text-decoration: none;
        }

        #seajs-debug-console #seajs-debug-header {
            line-height: 20px!important;
            height: 32px!important;
        }

        ul>li {
            padding-left: 20px;
            line-height: 30px;

        }

        input {
            line-height: 30px;
            height: 30px;
            font-size: 16px;
            padding: 6px 10px;
        }

        .imgdiv {
            width: 224px;
            height: 160px;
            border: 1px floralwhite solid;
            display: inline-block;

            margin: 10px auto;
            margin-right: 100px;
        }
    </style>

</head>

<body>

    <div class="container" id="app">

        <div class="mt_20">


        </div>

        <button-counter v-on:increment="incrementTotal"></button-counter>
        <button-counter v-on:increment="incrementTotal"></button-counter>

        <input type="text" class="form-control" v-focus v-red />


        <div v-img="item.url" v-for="item in list" class="imgdiv"></div>


        <code v-highlight>
            var  a=1;
            var  a=2;
            for(var i=0;i<10;i++)
            {
                console.log(i);
            }
        </code>

    </div>



    <script src="http://localhost:8180//git-my/vue-ladder/src/lib/jquery.js"></script>
    <script src="http://localhost:8180//git-my/vue-ladder/src/lib/sea-all.js"></script>
    <script src="http://localhost:8180//git-my/vue-ladder/src/lib/seajs-style.js"></script>
    <script src="http://localhost:8180//git-my/vue-ladder/src/lib/seajs-debug.js"></script>

    <script src="http://localhost:8180//git-my/vue-ladder/src/lib/vue.js"></script>
    <script src="http://localhost:8180//git-my/vue-ladder/src/lib/vue-router.js"></script>

    <script src="http://localhost:8180//git-my/vue-ladder/src/lib/lodash.js"></script>

    <script src="http://localhost:8180//git-my/vue-ladder/src/page/boot.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script>

    <script>
        $(function () {


            //全局指令
            Vue.directive('focus', {
                // 当被绑定的元素插入到 DOM 中时……
                inserted: function (el) {
                    // 聚焦元素
                    el.focus()
                }
            });

            //图片加载前用随机色渲染
            Vue.directive('img', {
                // 当被绑定的元素插入到 DOM 中时……
                inserted: function (el, binding) {
                    var color = Math.floor(Math.random() * 1000000);
                    el.style.backgroundColor = "#" + color;




                    var img = new Image();
                    img.src = binding.value;
                    img.onload = function () {
                        el.style.background = "url(" + "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512130636119&di=ad6017afe8acd3a305806b638c43bb93&imgtype=0&src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Fface%2Fdd2336fbbb9b976179eae07fb0eaa66e0c5f34b1.gif" + ") no-repeat center center"
                    }

                    setTimeout(() => {
                        var img = new Image();
                        img.src = binding.value;
                        img.onload = function () {
                            el.style.backgroundImage = "url(" + binding.value + ")"
                        }
                    }, 1000);


                }
            });


            seajs.use('https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js', function (hls) {
                Vue.directive('highlight', {
                    // 当被绑定的元素插入到 DOM 中时……
                    inserted: function (el) {
                        hljs.highlightBlock(el);
                    }
                });
            });


            Vue.component('button-counter', {
                template: `
  <button v-on:click="increment">{{ counter }}</button>`,
                data() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    increment: function () {
                        this.counter += 1
                        this.$emit('increment')
                    }

                }
            });








            var app = new Vue({
                el: '#app',
                data: {
                    list: [
                        {
                            url: "http://pic4.40017.cn/line/admin/2016/12/27/17/PW941D_224x160_00.jpg"
                        },
                        {
                            url: "http://pic3.40017.cn/line/admin/2015/09/30/11/2oPhmn_224x160_00.jpg"
                        }
                    ]
                },
                directives: {
                    red: {
                        // 指令的定义
                        inserted: function (el) {
                            $(el).css({
                                color: 'red'
                            });
                        }
                    }
                },
                methods: {
                    abc: function () {
                        alert(1233);
                    },
                    incrementTotal: function () {
                        alert(23456789);
                    }
                }
            });
        })
    </script>



</body>

</html>